import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, Alert } from 'react-native';
import { Content } from 'native-base';
import Layout from './Layout';
import Icon from "react-native-vector-icons/Feather";

export default class Trust extends Component {
    _onPressButton(){
        Alert.alert(
            "登记车位",
            "登记车位开发中/(ㄒoㄒ)/~~",
        );
    }
    render() {
        console.log(this.props);
        return (
            <Layout {...this.props}>
                <Content style={styles.content}>
                    <View style={styles.header}>
                        <Text style={styles.h3}>我的车位</Text>
                        <Text style={styles.desc}>你可以为车位设置可租用的时间，自定义价格，平台将为你寻找合适的对象</Text>
                    </View>
                    <TouchableWithoutFeedback onPress={this._onPressButton}>
                        <View style={styles.register}>
                            <Icon style={styles.plus} name='plus-circle' size={28}/>
                            <Text style={styles.text}>登记车位</Text>
                            <Icon style={styles.arrow} name='arrow-right' size={23}/>
                        </View>
                    </TouchableWithoutFeedback>
                </Content>
            </Layout>
        );
    }
}

const styles = StyleSheet.create({
    content: {
        backgroundColor:"#fafafa",
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 30
    },
    header: {
        borderBottomWidth:1,
        borderBottomColor:"#efefef",
        borderStyle:"solid",
        paddingBottom:20
    },
    h3: {
        fontSize: 26,
        fontWeight: "500"
    },
    desc: {
        fontSize: 16,
        color:"#777",
        marginTop:20,
        marginBottom:20
    },
    register: {
        display: "flex",
        flexDirection:"row",
        alignItems: "center",
        height: 80,
        marginTop:20,
        backgroundColor:"white",
        borderRadius:10,
        position:"relative"
    },
    plus: {
        marginLeft:20
    },
    text: {
        fontSize: 20,
        paddingLeft:7
    },
    arrow: {
        position:"absolute",
        right:20,
        color:"#777",
    }
})
